<script setup>
import { ref, reactive, onMounted, computed } from 'vue'
import { useRouter } from 'vue-router'
import { Toast, Dialog } from 'vant'
import api from '@/api'

const router = useRouter()

// 用户营地数据
const userCamp = ref({
  level: 1,
  name: '初级营地',
  experience: 120,
  nextLevelExperience: 200,
  income: 0.00000000,
  lastIncomeTime: '2023-10-15 12:30:45'
})

// 建设进度
const buildProgress = computed(() => {
  return (userCamp.value.experience / userCamp.value.nextLevelExperience) * 100
})

// 营地建设任务
const buildTasks = reactive([
  {
    id: 1,
    title: '每日签到',
    description: '连续签到可获得额外奖励',
    reward: 10,
    status: 'completed', // completed, in-progress, locked
    icon: 'sign'
  },
  {
    id: 2,
    title: '观看宣传视频',
    description: '了解更多营地建设知识',
    reward: 15,
    status: 'in-progress',
    icon: 'video-o'
  },
  {
    id: 3,
    title: '分享给好友',
    description: '邀请好友一起建设营地',
    reward: 20,
    status: 'in-progress',
    icon: 'friends-o'
  },
  {
    id: 4,
    title: '参与营地活动',
    description: '线下活动获取高额经验',
    reward: 50,
    status: 'locked',
    icon: 'flag-o'
  }
])

// 营地排行榜
const campRanking = reactive([
  {
    id: 1,
    username: '蓝天飞行员',
    level: 8,
    avatar: 'https://picsum.photos/200/200?random=1'
  },
  {
    id: 2,
    username: '云端漫步者',
    level: 7,
    avatar: 'https://picsum.photos/200/200?random=2'
  },
  {
    id: 3,
    username: '翱翔天际',
    level: 6,
    avatar: 'https://picsum.photos/200/200?random=3'
  },
  {
    id: 4,
    username: '飞行梦想家',
    level: 5,
    avatar: 'https://picsum.photos/200/200?random=4'
  },
  {
    id: 5,
    username: '蔚蓝领航员',
    level: 5,
    avatar: 'https://picsum.photos/200/200?random=5'
  }
])

// 当前标签页
const activeTab = ref('build')

// 页面加载完成后初始化
onMounted(() => {
  loadUserCamp()
  loadBuildTasks()
  loadCampRanking()
})

// 加载用户营地信息
const loadUserCamp = async () => {
  try {
    // 实际项目中应该从API获取数据
    // const response = await api.camp.getUserCamp()
    // userCamp.value = response.data
    console.log('加载用户营地信息')
  } catch (error) {
    console.error('加载用户营地信息失败:', error)
  }
}

// 加载建设任务
const loadBuildTasks = async () => {
  try {
    // 实际项目中应该从API获取数据
    // const response = await api.camp.getBuildTasks()
    // buildTasks.value = response.data
    console.log('加载建设任务')
  } catch (error) {
    console.error('加载建设任务失败:', error)
  }
}

// 加载营地排行榜
const loadCampRanking = async () => {
  try {
    // 实际项目中应该从API获取数据
    // const response = await api.camp.getCampRanking()
    // campRanking.value = response.data
    console.log('加载营地排行榜')
  } catch (error) {
    console.error('加载营地排行榜失败:', error)
  }
}

// 处理任务点击
const handleTaskClick = (task) => {
  console.log('点击任务:', task.title)
  
  if (task.status === 'locked') {
    Toast('该任务暂未解锁')
    return
  }
  
  // 根据任务类型执行不同操作
  switch (task.id) {
    case 1: // 签到
      Toast('今日已签到')
      break
    case 2: // 观看视频
      Dialog({
        title: '观看视频',
        message: '是否观看宣传视频获取经验值？',
        confirmButtonText: '立即观看',
        cancelButtonText: '稍后再说'
      }).then(() => {
        router.push('/video')
      }).catch(() => {
        // 用户取消
      })
      break
    case 3: // 分享
      Dialog({
        title: '分享给好友',
        message: '邀请好友一起建设营地，双方都可获得额外奖励！',
        confirmButtonText: '立即分享',
        cancelButtonText: '稍后再说'
      }).then(() => {
        Toast('分享功能开发中')
      }).catch(() => {
        // 用户取消
      })
      break
    default:
      Toast('任务功能开发中')
  }
}

// 领取营地收益
const claimIncome = async () => {
  try {
    // 实际项目中应该调用API
    // await api.camp.claimIncome()
    Toast('领取收益功能开发中')
  } catch (error) {
    console.error('领取收益失败:', error)
    Toast('领取失败，请稍后重试')
  }
}

// 升级营地
const upgradeCamp = () => {
  if (userCamp.value.experience < userCamp.value.nextLevelExperience) {
    Toast(`经验不足，还需要${userCamp.value.nextLevelExperience - userCamp.value.experience}点经验`)
    return
  }
  
  Dialog({
    title: '升级营地',
    message: '确定要将营地升级到下一级吗？',
    confirmButtonText: '确定升级',
    cancelButtonText: '再等等'
  }).then(() => {
    // 实际项目中应该调用API
    // await api.camp.upgradeCamp()
    Toast('营地升级功能开发中')
  }).catch(() => {
    // 用户取消
  })
}
</script>

<template>
  <div class="page-container">
    <!-- 顶部导航栏 -->
    <div class="navbar">
      <div class="tabs">
        <div 
          class="tab" 
          :class="{ active: activeTab === 'build' }"
          @click="activeTab = 'build'"
        >
          建设营地
        </div>
        <div 
          class="tab" 
          :class="{ active: activeTab === 'ranking' }"
          @click="activeTab = 'ranking'"
        >
          排行榜
        </div>
      </div>
    </div>
    
    <!-- 建设营地标签页 -->
    <div v-show="activeTab === 'build'" class="tab-content">
      <!-- 营地信息卡片 -->
      <div class="camp-card">
        <div class="camp-header">
          <div class="camp-level">Lv.{{ userCamp.level }}</div>
          <div class="camp-name">{{ userCamp.name }}</div>
        </div>
        
        <div class="camp-progress">
          <div class="progress-text">
            <span>经验值：{{ userCamp.experience }}/{{ userCamp.nextLevelExperience }}</span>
            <span>{{ buildProgress.toFixed(0) }}%</span>
          </div>
          <div class="progress-bar">
            <div class="progress-fill" :style="{ width: buildProgress + '%' }"></div>
          </div>
        </div>
        
        <div class="camp-income">
          <div class="income-info">
            <div class="income-label">营地收益</div>
            <div class="income-value">¥{{ userCamp.income }}</div>
            <div class="income-time">上次收益时间：{{ userCamp.lastIncomeTime }}</div>
          </div>
          <van-button 
            type="primary" 
            size="small" 
            class="claim-btn"
            @click="claimIncome"
          >
            领取
          </van-button>
        </div>
        
        <div class="camp-actions">
          <van-button 
            type="primary" 
            block
            @click="upgradeCamp"
          >
            升级营地
          </van-button>
        </div>
      </div>
      
      <!-- 建设任务列表 -->
      <div class="task-section">
        <div class="section-title">建设任务</div>
        <div class="task-list">
          <div 
            v-for="task in buildTasks" 
            :key="task.id" 
            class="task-item"
            :class="{ 
              'completed': task.status === 'completed',
              'in-progress': task.status === 'in-progress',
              'locked': task.status === 'locked'
            }"
            @click="handleTaskClick(task)"
          >
            <div class="task-icon">
              <van-icon :name="task.icon" />
            </div>
            <div class="task-content">
              <div class="task-title">{{ task.title }}</div>
              <div class="task-description">{{ task.description }}</div>
              <div class="task-reward">奖励：{{ task.reward }}经验</div>
            </div>
            <div class="task-status">
              <van-icon 
                :name="
                  task.status === 'completed' ? 'checked' : 
                  task.status === 'locked' ? 'lock' : 'arrow'
                " 
              />
            </div>
          </div>
        </div>
      </div>
    </div>
    
    <!-- 排行榜标签页 -->
    <div v-show="activeTab === 'ranking'" class="tab-content">
      <div class="ranking-section">
        <div class="section-title">营地排行榜</div>
        <div class="ranking-list">
          <div 
            v-for="(item, index) in campRanking" 
            :key="item.id" 
            class="ranking-item"
          >
            <div class="ranking-number" :class="`rank-${index + 1}`">{{ index + 1 }}</div>
            <div class="ranking-avatar">
              <img :src="item.avatar" :alt="item.username">
            </div>
            <div class="ranking-info">
              <div class="ranking-name">{{ item.username }}</div>
              <div class="ranking-level">Lv.{{ item.level }}</div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped>
.page-container {
  background-color: #f5f7fa;
  min-height: 100vh;
  padding-bottom: 60px;
}

/* 顶部导航栏 */
.navbar {
  background-color: white;
  padding: 10px 15px;
  position: sticky;
  top: 0;
  z-index: 100;
}

.tabs {
  display: flex;
  justify-content: space-around;
  border-radius: 20px;
  background-color: #f5f7fa;
  padding: 3px;
}

.tab {
  flex: 1;
  text-align: center;
  padding: 8px 0;
  border-radius: 20px;
  font-size: 14px;
  transition: all 0.3s;
}

.tab.active {
  background-color: var(--primary-color);
  color: white;
  font-weight: bold;
}

/* 标签页内容 */
.tab-content {
  padding: 15px;
}

/* 营地卡片 */
.camp-card {
  background-color: white;
  border-radius: 10px;
  padding: 15px;
  margin-bottom: 15px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

.camp-header {
  display: flex;
  align-items: center;
  margin-bottom: 15px;
}

.camp-level {
  background-color: var(--primary-color);
  color: white;
  font-weight: bold;
  padding: 3px 10px;
  border-radius: 15px;
  margin-right: 10px;
  font-size: 12px;
}

.camp-name {
  font-size: 18px;
  font-weight: bold;
}

.camp-progress {
  margin-bottom: 15px;
}

.progress-text {
  display: flex;
  justify-content: space-between;
  font-size: 12px;
  color: #666;
  margin-bottom: 5px;
}

.progress-bar {
  height: 8px;
  background-color: #f0f0f0;
  border-radius: 4px;
  overflow: hidden;
}

.progress-fill {
  height: 100%;
  background-color: var(--primary-color);
  border-radius: 4px;
}

.camp-income {
  display: flex;
  align-items: center;
  margin-bottom: 15px;
  padding: 10px;
  background-color: #FFF8E1;
  border-radius: 8px;
}

.income-info {
  flex: 1;
}

.income-label {
  font-size: 12px;
  color: #666;
}

.income-value {
  font-size: 18px;
  font-weight: bold;
  margin: 5px 0;
}

.income-time {
  font-size: 10px;
  color: #999;
}

.claim-btn {
  flex-shrink: 0;
}

/* 建设任务部分 */
.task-section {
  background-color: white;
  border-radius: 10px;
  padding: 15px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

.section-title {
  font-size: 16px;
  font-weight: bold;
  margin-bottom: 15px;
  color: var(--primary-color);
}

.task-list {
  background-color: white;
}

.task-item {
  display: flex;
  padding: 15px 0;
  border-bottom: 1px solid #f0f0f0;
}

.task-item:last-child {
  border-bottom: none;
}

.task-icon {
  width: 40px;
  height: 40px;
  border-radius: 20px;
  background-color: #f5f7fa;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-right: 10px;
  flex-shrink: 0;
}

.task-icon .van-icon {
  font-size: 20px;
  color: var(--primary-color);
}

.task-content {
  flex: 1;
}

.task-title {
  font-size: 16px;
  font-weight: bold;
  margin-bottom: 3px;
}

.task-description {
  font-size: 12px;
  color: #666;
  margin-bottom: 5px;
}

.task-reward {
  font-size: 12px;
  color: var(--primary-color);
  font-weight: bold;
}

.task-status {
  display: flex;
  align-items: center;
  margin-left: 10px;
}

.task-status .van-icon {
  font-size: 20px;
}

/* 任务状态样式 */
.task-item.completed .task-status .van-icon {
  color: #4CAF50;
}

.task-item.locked {
  opacity: 0.6;
}

.task-item.locked .task-status .van-icon {
  color: #999;
}

/* 排行榜部分 */
.ranking-section {
  background-color: white;
  border-radius: 10px;
  padding: 15px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

.ranking-list {
  background-color: white;
}

.ranking-item {
  display: flex;
  align-items: center;
  padding: 15px 0;
  border-bottom: 1px solid #f0f0f0;
}

.ranking-item:last-child {
  border-bottom: none;
}

.ranking-number {
  width: 24px;
  height: 24px;
  border-radius: 12px;
  background-color: #f0f0f0;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 14px;
  font-weight: bold;
  margin-right: 15px;
}

.ranking-number.rank-1 {
  background-color: #FFD700;
  color: white;
}

.ranking-number.rank-2 {
  background-color: #C0C0C0;
  color: white;
}

.ranking-number.rank-3 {
  background-color: #CD7F32;
  color: white;
}

.ranking-avatar {
  width: 40px;
  height: 40px;
  border-radius: 20px;
  overflow: hidden;
  margin-right: 10px;
}

.ranking-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.ranking-info {
  flex: 1;
}

.ranking-name {
  font-size: 16px;
  font-weight: bold;
}

.ranking-level {
  font-size: 12px;
  color: var(--primary-color);
}
</style>